<template>
  <div class="recom">
        <div class="recm-fh">
            <img src="../../assets/images/recom-fh.png">
       </div>
   <div class="recom-shell">
       <div class="recom-nav">
           <div class="recom-nav-img">
               <div class="recom-nav-img-shell">
                   <img src="../../assets/images/recom3.png" alt=""  class="recom-nav-images">
                   <img src="../../assets/images/recom-male.png" class="recom-nav-images-male">
                  <img src="../../assets/images/recom-female.png" class="recom-nav-female-male">
               </div>
           </div>
           <div class="recom-nav-name">
                   <div class="recom-nav-name-shell">
                       <span class="recom-nav-names">用户名</span><div class="recom-nav-money">
                       <span class="recom-nav-money-name">剩余金币</span><span class="recom-nav-money-text">30267</span><span class="recom-nav-money-name">(币)</span>
                   </div>
                   </div>
            </div>

                <div class="recom-list">
                <div class="recom-list-nav">
                    <span class="recom-list-name">名称</span><span class="recom-list-name">金币</span><span class="recom-list-name">时间</span>
                </div>
                <ul class="recom-list-ul">
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                     <li class="recom-list-li">
                        <span class="recom-list-li-name">推荐VIP学员</span><span class="recom-list-li-name">2000</span><span class="recom-list-li-name">2021-03-13</span>
                    </li>
                </ul>
           </div>
       </div>
       <div class="recom-footer">
           <ul class="recom-footer-ul">
               <li class="recom-footer-li">
                   <img src="../../assets/images/recom-tyst.png" class="tyst-img">
               </li>
                <li class="recom-footer-li">
                   <img src="../../assets/images/recom-hb.png" class="hb-img">
               </li>
               <li class="recom-footer-li">
                   <img src="../../assets/images/recom-my.png" class="my-img">
               </li>
           </ul>
       </div>
   </div>
  </div>
</template>

<script>
export default {
 name:'GoldCoin',
 data: function() {
    return {
      screenWidth: document.body.clientWidth
    };
  },
    created(){
       window.addEventListener("resize", this.handleResize)
    },
    methods:{
        handleResize(){
              if (document.body.clientWidth < 740) {
             this.$router.push({ path: "/recom" });
           }
        }
    }
}
</script>

<style scoped>

.recom{
    background: url(../../assets/images/recom-bj.png)no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100vh;
}

.recom-shell{
    background: url(../../assets/images/recom-zk.png)no-repeat;
    background-size: 100% 100%;
      width: 2.40rem;
    height: 3rem;
    position: absolute;
    left: 50%;
    top: 43%;
    transform: translate(-50%, -50%);
}

.recom-nav{
    width: 100%;
    height: 100%;
    position: relative;
}

.recom-nav-img{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
 margin-top: 0.54rem;
}

.recom-nav-images{
  display: block;
    height: 0.25rem;
    width: 0.25rem;
}
.recom-nav-name-shell{
        font-size: 0;
}

.recom-nav-img-shell{
    position: relative;
}

.recom-nav-images-male{
    display: block;
    position: absolute;
    width: 0.12rem;
    height: 0.12rem;
    right: -0.25rem;
    bottom: -0.017rem;
}

.recom-nav-female-male{
     display: block;
    position: absolute;
    width: 0.094rem;
    height: 0.125rem;
    right: -0.08rem;
    bottom: -0.017rem;
}



.recom-nav-name{
    position: absolute;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin-top: 0.625rem;
    text-align: center;
    width: 100%;
}

.recom-nav-names{
    color: #fff;
    font-size: 0.081rem;
    padding-top: 0.23rem;
    display: inline-block;
}

.recom-nav-money{
    color: #fff;
    font-size: 0.081rem;
}

.recom-nav-money-text{
   color: #FFFB7D;
    font-size: 0.16rem;
    padding: 0px 0.08rem;
}

.recom-nav-money{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  margin-top: 0.1rem;
}

.recom-list-nav{
    width: 100%;
    font-size: 0rem;
    margin-top: 0.165rem;
}

.recom-list-name{
    display: inline-block;
    width: 33.3%;
    font-size: 0.081rem;
    color: #7C38E1;
}

.recom-list{
    position: absolute;
    top: 1.11rem;
    width: 100%;
    text-align: center;
}

.recom-list-li-name{
    width: 33.3%;
    font-size: 0.081rem;
}

.recom-list-ul{
    font-size: 0;
    margin-top: 0.031rem;
}

.recom-list-li{
    color: #7C38E1;
    font-size: 0.08rem;
    height: 0.1619rem;
    display: flex;
    align-items: center;
}

.recom-list-li-name{
    display:inline-block;
    width: 33.3%;
}


.recom-list-li:nth-child(even) span:nth-child(2){
    color: #FE276A;
}

.recm-fh{
    position: absolute;
    left: 54px;
    top: 47px;
    width: 0.223rem;
    height: 0.223rem;
}

.recm-fh img{
    width: 100%;
    display: block;
    height: 100%;
}

.img{
    width: 100%;
    display: block;
    height: 100%;
}

.recom-footer-ul{
    display: flex;
    text-align: center;
    margin-top: 0.16rem;
}

.recom-footer-li{
    flex: 0 0 33.3%;
}

.tyst-img{
      width: 0.375rem;
    height: 0.34rem;
}

.hb-img{
     width: 0.34rem;
    height: 0.34rem;
}
.my-img{
    width: 0.34rem;
    height: 0.352rem;
}

.recom-footer-li:nth-child(1){
    text-align: left;
}

.recom-footer-li:nth-child(2){
    text-align: center;
}

.recom-footer-li:nth-child(3){
    text-align: right;
}


@media (max-width:1400px) {
    .recom-shell {
    width: 3rem;
    height: 3.6rem;
}
.recom-nav-img{
    margin-top: 0.653rem;
}

.recom-nav-images{
    height: 0.32rem;
    width: 0.32rem;
}

.recom-nav-name {
    margin-top: 0.77rem;
}
.recom-nav-money{
    margin-top: 0.13rem;
}

.recom-list-name{
    font-size: 0.098rem;
}
.recom-list-li-name{
    width: 33.3%;
    font-size: 0.098rem;
}
.recom-list-li{
    height: 0.194rem;
}

.recom-list {
    top: 1.371rem;
}

.recm-fh{
    width: 0.305rem;
    height: 0.305rem;
}
.tyst-img{
    width: 0.515rem;
    height: 0.467rem;
}

.hb-img{
    width: 0.467rem;
    height: 0.467rem;
}
.my-img{
    width: 0.467rem;
   height: 0.483rem;
}

}


</style>